<template>
 <div class="JustifyContent-Box">
   <div class="JustifyConten-Title">
     <span>JustifyConten</span>
    <select @change="getIndex">
          <option v-for="(itme,index) in value" :key="index" :value="itme.value"  >{{itme.value+"/"+itme.Title}}</option>
    </select>
   </div>
   <div class="JustifyConten-Content" :style="valueClass">
     <div class="JustifyConten-Content-Chid">J</div>
      <div class="JustifyConten-Content-Chid">u</div>
       <div class="JustifyConten-Content-Chid">s</div>
        <div class="JustifyConten-Content-Chid">t</div>
         <div class="JustifyConten-Content-Chid">f</div>
          <div class="JustifyConten-Content-Chid">y</div>
            <div class="JustifyConten-Content-Chid">c</div>
           <div class="JustifyConten-Content-Chid">o</div>
            <div class="JustifyConten-Content-Chid">e</div>
             <div class="JustifyConten-Content-Chid">n</div>
              <div class="JustifyConten-Content-Chid">t</div>
   </div>
 </div>
</template>
<script>
         
export default {
  data(){ 

   return {

 value:[
   {value:'center',Title:'水平居中'},
   {value:'flex-start',Title:'水平左对齐'},
   {value:'flex-end',Title:'水平右对齐'},
   {value:'space-between',Title:'水平两端对齐,间隔都相等'},
    {value:'space-around',Title:'两侧的间隔相等'}//。所以，项目之间的间隔比项目与边框的间隔大一倍
 ],
 valueClass:""
   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。



  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   this.click(this.key)

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

click(Vlue,key){
this.$store.state.HeaderTitle = "JustifyContent"


 

 },
  getIndex(index) {
       this.valueClass = "justify-content:" +index.target.value +";";
       console.log( this.valueClass)
    }

  }

}

</script>

<style lang="scss"  scope>
   .JustifyContent-Box {
     flex: 1;
     background-color: skyblue;
     display: flex;
     flex-direction: column;
   }
   .JustifyConten-Title {
     width: 100%;
     height: 30px;
     background-color: cornflowerblue;
     display: flex;
     align-items: center;
     justify-content: space-between;


   }
  .JustifyConten-Content{
      flex: 1;
      background-color: coral;
      display: flex;
      flex-wrap: nowrap;

     }
   .JustifyConten-Content-Chid {
     width: 20px;
     height: 20px;
     line-height: 20px;
     color: white;
     border:1px solid #3333;
   }
</style>